<template>
    <div class="rightContent">
        <div class="right-left">
            <el-tabs>
                <el-tab-pane label="点餐">
                    <el-table :data="tableData" border style="width: 100%" height="550">
                        <el-table-column label="商品名称" width="100" prop="goodsName"></el-table-column>
                        <el-table-column label="数量"  width="70" prop="count"></el-table-column>
                        <el-table-column label="金额" width="70" prop="price"></el-table-column>
                        <el-table-column label="操作" width="110">
                            <template slot-scope="scope">
                            <el-button  type="text" size="small" @click="delGoods(scope.row)">删除</el-button>
                            <el-button type="text" size="small" @click="addGoods(scope.row)">增加</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                 </el-tab-pane>
                <el-tab-pane label="挂单">挂单</el-tab-pane>
                <el-tab-pane label="外卖">外卖</el-tab-pane>
            </el-tabs>
            <div class="total">商品：{{totalCount}}件 总额：{{totalMoney}}元</div>
            <div class="click-button"> 
                <el-button type="warning">挂单</el-button>
                 <el-button type="danger" @click="deAllGoodsList">删除</el-button>
                <el-button type="success" @click="payMoney">结账</el-button>
            </div>
        </div>
        <div class="right-right" >
            <div class="title">
                <h3>常用商品</h3>
            </div>
            <div class="ofengoods clearfix"  v-loading="loading">
                <div class="goods" v-for="item in oftenData" :key="item.goodsId" @click="addToList(item)">
                    <span>{{item.goodsName}}</span><span class="price">￥{{item.price}}元</span> 
                </div>
            </div>
            <div class="diancan">
                 <el-tabs>
                <el-tab-pane label="汉堡">    
                    <div class="diancanGoods" v-for="item in typeData0" :key="item.goodsId" @click="addToList(item)">
                        <img :src="item.goodsImg">
                        <div>
                            <p class="goodsName">{{item.goodsName}}</p>
                            <p class="goodsPrice">￥{{item.price}}.00元</p>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="小食">
                    <div class="diancanGoods" v-for="item in typeData1" :key="item.goodsId" @click="addToList(item)">
                        <img :src="item.goodsImg">
                        <div>
                            <p class="goodsName">{{item.goodsName}}</p>
                            <p class="goodsPrice">￥{{item.price}}.00元</p>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="饮料">
                    <div class="diancanGoods" v-for="item in typeData2" :key="item.goodsId" @click="addToList(item)">
                        <img :src="item.goodsImg">
                        <div>
                            <p class="goodsName">{{item.goodsName}}</p>
                            <p class="goodsPrice">￥{{item.price}}.00元</p>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="套餐">
                    <div class="diancanGoods" v-for="item in typeData3" :key="item.goodsId" @click="addToList(item)">
                        <img :src="item.goodsImg">
                        <div>
                            <p class="goodsName">{{item.goodsName}}</p>
                            <p class="goodsPrice">￥{{item.price}}.00元</p>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      tableData:[],
      oftenData:[],
      typeData0:[],
      typeData1:[],
      typeData2:[],
      typeData3:[],
      totalCount:0,
      totalMoney:0,
      loading:true
    }
  },
  created() {
        this.getTypeGoods()
        this. getOfenGoods()
  },
  methods:{
      getTypeGoods(){
          axios.get('http://jspang.com/DemoApi/typeGoods.php')
          .then(response=>{
              this.typeData0 = response.data[0]
              this.typeData1 = response.data[1]
              this.typeData2 = response.data[2]
              this.typeData3 = response.data[3]
          })
          .catch(error=>{
              alert('网络错误')
          })
      },
      getOfenGoods(){
          axios.get('http://jspang.com/DemoApi/oftenGoods.php')
          .then(response=>{
              this.oftenData = response.data
              this.loading = false
          })
          .catch(errpr=>{
              alert('网络错误！')
          })
      },
      addToList(goods){
           var obj = {
                  goodsId:goods.goodsId,
                  count:1,
                  goodsName:goods.goodsName,
                  price:goods.price
              }   
            var flag = true;
            this.tableData.forEach(element => {
                if(element.goodsId == obj.goodsId){
                    element.count++
                    flag=false
                }
            });   
            if(flag){
                this.tableData.push(obj)
            }   
            this.getTotal()                    
      },
      delGoods(goods){
          this.tableData.forEach((item,i)=>{
              if(item.goodsId == goods.goodsId){
                  this.tableData.splice(i,1)
              }
          })
          this.getTotal()  
      },
      addGoods(goods){
        goods.count++
        this.getTotal()  
      },
      deAllGoodsList(){
          this.tableData = []
          this.getTotal()  
      },
      getTotal(){
          this.totalCount=0
          this.totalMoney=0
          this.tableData.forEach(item=>{
              this.totalCount += item.count
              this.totalMoney += item.count*item.price
          })
      },
      payMoney(){
          if(this.totalMoney==0){
              this.$alert('我下单金额不能为0','下单失败')
          }else{
              this.$alert('继续加油','下单成功！')
          }
      },
      

      

  }
};
</script>
<style lang="less">
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.rightContent {
  float: left;
  width: 92%;
  height: 100%;
  display: flex;
  flex-direction: wrap;
  .right-left {
    height: 100%;
    width: 35%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    .el-tabs__nav {
      margin-left: 10px;
    }
    .el-table th {
      background: #ccc;
    }
    .click-button {
      margin-top: 15px;
    }
    .total{
        margin-top: 10px;
    }
  }
  .right-right {
    height: 100%;
    width: 65%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    background-color: #fcfcfc;
    .title {
      border-bottom: 1px solid #ccc;
      h3 {
        margin: 0;
        text-align: left;
        font-weight: 400;
        padding: 7px 0;
      }
    }
    .ofengoods {
      padding: 10px;
      border-bottom: 1px solid #ccc;
      .goods {
        width: 130px;
        padding: 10px 5px;
        border: 1px solid #ccc;
        margin: 10px 8px;
        float: left;
        background-color: #fff;
        cursor: pointer;
        font-size: 14px;
        .price {
          color: #0a7fdb;
        }
      }
    }
  }
  .diancan {
    .el-tabs__nav {
      margin-left: 10px;
    }
    .diancanGoods {
      float: left;
      border: 1px solid #ccc;
      width: 180px;
      margin: 10px 13px;
      display: flex;
      flex-direction: wrap;
      padding: 5px;
      background-color: #fff;
      cursor: pointer;
      img {
        width: 90px;
        height: 70px;
        display: block;
      }
      p {
        margin: 0 auto;
        margin-bottom: 8px;
        text-align: center;
        width: 90px;
        font-size: 14px;
      }
      .goodsName {
        color: red;
      }
    }
  }
}
</style>

